<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米物流信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- Gritter -->

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <style type="text/css">
        #forPage {
            text-align: center;
        }
         #page-wrapper
         {
             margin: 0 0 0 0px;
         }
        h1
        {
            font-size: 60px;
        }
    </style>
</head>
<body>
<div id="wrapper">

    <div id="page-wrapper" class="gray-bg dashbard-1">

            <!-- pageHead start -->
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-sm-4">
                    <h2>订单管理</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="../index.html">首页</a>
                        </li>
                        <li class="active">
                            <strong>订单信息</strong>
                        </li>
                    </ol>
                </div>
            </div>
            <!-- pageHead end -->

            <!-- pageContext start -->

            <div class="col-lg-6">
                <h4>订单分类</h4>
                <div>
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-danger m-r-sm">12</button>
                                未付款
                            </td>
                            <td>
                                <button type="button" class="btn btn-primary m-r-sm">28</button>
                                已付款
                            </td>
                            <td>
                                <button type="button" class="btn btn-info m-r-sm">15</button>
                                已发货
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-info m-r-sm">20</button>
                                已接收
                            </td>
                            <td>
                                <button type="button" class="btn btn-success m-r-sm">40</button>
                                已完成
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger m-r-sm">30</button>
                                未付款订单
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button type="button" class="btn btn-warning m-r-sm">20</button>
                                未付款已发货
                            </td>
                            <td>
                                <button type="button" class="btn btn-default m-r-sm">40</button>
                                未付款已接收
                            </td>
                            <td>
                                <button type="button" class="btn btn-warning m-r-sm">30</button>
                                Permissions
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-md-3" align="center">
                    <button type="button" class="btn btn-primary btn-block compose-mail" data-toggle="modal" data-target="#myModal6">
                        <i class="fa fa-plus"></i>&nbsp;&nbsp;新建订单</a>
                    </button>
                </div>
            </div>

            <div class="col-sm-5 col-sm-offset-1">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>正在进行的订单</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr >
                                <th>订单号</th>
                                <th>下单日期</th>
                                <th>金额</th>
                                <th>订单状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><small>Pending...</small></td>
                                <td><i class="fa fa-clock-o"></i> 11:20pm</td>
                                <td>Samantha</td>
                                <td class="text-navy">已完成 </td>
                            </tr>
                            <tr>
                                <td><span class="label label-warning">Canceled</span> </td>
                                <td><i class="fa fa-clock-o"></i> 10:40am</td>
                                <td>Monica</td>
                                <td class="text-navy label-warning-son">未上货 <!-- <i class="fa fa-level-up"></i> 66%  --></td>
                            </tr>
                            <tr>
                                <td><small>Pending...</small> </td>
                                <td><i class="fa fa-clock-o"></i> 01:30pm</td>
                                <td>John</td>
                                <td class="text-navy">已完成</td>
                            </tr>
                            <tr>
                                <td><small>Pending...</small> </td>
                                <td><i class="fa fa-clock-o"></i> 02:20pm</td>
                                <td>Agnes</td>
                                <td class="text-navy">已完成</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 列表展示 -->
            <div class="row">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="table table-hover no-margins">
                            <thead>
                            <tr>
                                <th>订单编号</th>
                                <th>下单人</th>
                                <th>所属客户</th>
                                <th>下单时间</th>
                                <th>上货时间</th>
                                <th>运费</th>
                                <th>订单状态</th>
                                <th>收货地址</th>
                                <th>物流信息</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${listForOrder }" var="list">
                                <tr>
                                    <td><small>${list.oid}</small></td>
                                    <td>${list.user.uname}</td>
                                    <td>${list.custom.cname }</td>
                                    <td>${list.omakeordertime }</td>
                                    <td>${list.oupproducetime }</td>
                                    <td>${list.ofare }</td>
                                    <td>${list.ostatus }</td>
                                    <td>${list.oreceiveaddress }</td>
                                    <td><input type="button" value="物流详细信息"
                                               onclick="toLayers(${list.ologistics.lid},${list.custom.cid},${list.user.uid});" /></td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>
                    </div>
                    <div id="forPage">
                        <select id="choiceId" onchange="getId()">
                            <option id="2">3</option>
                            <option id="4">4</option>
                            <option id="6">6</option>
                            <option id="8">8</option>
                        </select>| <a href="javascript:void(0)" onclick="forPage(1);">首页</a>| <a
                            href="javascript:void(0)" onclick="forPage(${pageIndex-1})">上一页</a>| <a
                            href="javascript:void(0)" onclick="forPage(${pageIndex+1})">下一个</a>| <a
                            href="javascript:void(0)" onclick="forPage(${countPage})">尾页</a>| 跳转到&nbsp;<input
                            type="text" size="1" value="1">&nbsp;页&nbsp;
                        <button onclick="goTo();">GO</button>
                    </div>
                </div>
            </div>
            <!-- pageContext end -->
    </div>
</div>

<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../layer/layer.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Flot -->
<script src="../js/plugins/flot/jquery.flot.js"></script>
<script src="../js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="../js/plugins/flot/jquery.flot.spline.js"></script>
<script src="../js/plugins/flot/jquery.flot.resize.js"></script>
<script src="../js/plugins/flot/jquery.flot.pie.js"></script>

<!-- Peity -->
<script src="../js/plugins/peity/jquery.peity.min.js"></script>
<script src="../js/demo/peity-demo.js"></script>

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>
<script src="../js/plugins/pace/pace.min.js"></script>

<!-- jQuery UI -->
<script src="../js/plugins/jquery-ui/jquery-ui.min.js"></script>


<!-- Sparkline -->
<script src="../js/plugins/sparkline/jquery.sparkline.min.js"></script>

<!-- Sparkline demo data  -->
<script src="../js/demo/sparkline-demo.js"></script>

<!-- ChartJS-->
<script src="../js/plugins/chartJs/Chart.min.js"></script>

<!-- Toastr -->
<script src="../js/plugins/toastr/toastr.min.js"></script>
<script>
    //悬浮框(显示物流,客户,员工信息)
    function toLayers(lid,cid,uid) {
        layer.open({
            type : 2,
            title : '物流详情',
            area : [ '400px', '520px' ],
            /*content : 'getInfo.do?lid='+lid+'&cid='+cid+'&uid='+uid*/
            content: 'getWuLiuInfo.html'
        });
    }

    //分页
    function forPage(Index)
    {
        //获取每页显示的数据
        var choice_id = $("#choiceId").val();
        location.href="page.do?choice_id="+choice_id+'&Index='+Index;
    }

    $(document).ready(function(){
        /*function() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = date.getFullYear() + seperator1 + month
                + seperator1 + strDate + " " + date.getHours()
                + seperator2 + date.getMinutes() + seperator2
                + date.getSeconds();
            setTimeout(function() {
                toastr.options = {
                    closeButton : true,
                    progressBar : true,
                    showMethod : 'slideDown',
                    timeOut : 4000
                };
                toastr.success('现在是' + currentdate, '您好，欢迎来到玉米管理系统');

            }, 1300);*/

            var data1 = [[1,8],[2,5],[3,10],[4,4],[5,16],[6,5],[7,11],[8,6],[9,11],[10,30],[11,10],[12,13]];
            var data2 = [ [ 1, 0 ], [ 2, 2 ], [ 3, 0 ], [ 4, 1 ],
                [ 5, 3 ], [ 6, 1 ], [ 7, 5 ], [ 8, 2 ], [ 9, 3 ],
                [ 10, 2 ], [ 11, 1 ], [ 12, 0 ] ];
            var data3 = [ [ 1, 8 ], [ 2, 8 ], [ 3, 9 ], [ 4, 0 ],
                [ 5, 43 ], [ 6, 1 ], [ 7, 5 ], [ 8, 2 ], [ 9, 3 ],
                [ 10, 2 ], [ 11, 2 ], [ 12, 0 ] ];
            $("#flot-dashboard-chart").length
            && $.plot($("#flot-dashboard-chart"), [ {
                data : data1,
                label : "aaa"
            }, {
                data : data2,
                label : "bbb"
            }, {
                data : data3,
                label : "ccc"
            } ], {
                series : {
                    lines : {
                        show : false,
                        //fill: true,
                        stack : true,
                        bars : {
                            show : true
                        }
                    },
                    splines : {
                        show : true,
                        tension : 0.4,
                        lineWidth : 1,
                        fill : 0.4
                    },
                    points : {
                        radius : 0,
                        show : true
                    },
                    shadowSize : 2
                },
                label : [ "aaa", "bbb", "ccc" ],

                grid : {
                    hoverable : true,
                    clickable : true,
                    tickColor : "#d5d5d5",
                    borderWidth : 1,
                    color : '#d5d5d5'
                },
                //更改颜色
                colors : [ "#1ab394", "#464f88" ],
                //colors:["red","yellow","block"],
                xaxis : {},

                yaxis : {},
                tooltip : true
            });

            var doughnutData = [ {
                value : 300,
                color : "#a3e1d4",
                highlight : "#1ab394",
                label : "App"
            }, {
                value : 50,
                color : "#dedede",
                highlight : "#1ab394",
                label : "Software"
            }, {
                value : 100,
                color : "#b5b8cf",
                highlight : "#1ab394",
                label : "Laptop"
            } ];

            var doughnutOptions = {
                segmentShowStroke : true,
                segmentStrokeColor : "#fff",
                segmentStrokeWidth : 2,
                percentageInnerCutout : 45, // This is 0 for Pie charts
                animationSteps : 100,
                animationEasing : "easeOutBounce",
                animateRotate : true,
                animateScale : false
            };

        });
</script>
</body>
</html>